<template>
    <div class="zero_heard">
       <div class="zero_top">
           <div style="width: 70%;margin: 0 auto;color: white;font-size: 14px;">
               <div style="float: left;margin-top: 3px;">贵州理工学院毕业立享1折</div>
               <div style="float: right;margin-top: 3px;">探索Zero突破</div>
           </div>
       </div>
        <div class="zero_naviga">
            <div class="zero_naviga_top">
                <i class="el-icon-place" style="margin-right: 10px"></i>中国大陆地区
                <div class="login_box" v-if="username =='' || username==null ">
                    <span>Zero Club</span>
                    <el-divider direction="vertical"></el-divider>
                    <span @click="loginIndex"><i class="el-icon-user" style="margin-right: 10px;"></i>登录</span>
                    <el-divider direction="vertical"></el-divider>
                    <span @click="registered">注册</span>
                </div>
                <div class="login_box" v-else>
                    欢迎回来！ {{username}}
                    <el-divider direction="vertical"></el-divider>
                    <span @click="closeLogin">退出</span>
                </div>
            </div>
            <div class="naviga_body">
                <div style="margin: 0 auto;text-align: center;">
                    <img @click="logoIndex" style="width: 120px;margin-left: 220px;" src="./../assets/logo.png">
                    <div style="float: right;margin-top: 50px;">
                        <el-input style="width: 200px;" placeholder="请输入内容" v-model="seachInput" prefix-icon="el-icon-search" ></el-input>
                    </div>
                    <el-badge :value="number" type="info" class="item" v-if="number">
                        <i class="el-icon-goods" @click="goodsBuy" style="font-size: 40px;"></i>
                    </el-badge>
                </div>
            </div>
        </div>
<!--     目录   -->
    </div>
</template>

<script>
    import {shopcarShowGoodsApi} from "@/api/lj_port/interface";
    export default {
        name: "heard",
        data(){
            return{
                username:'',
                seachInput:'',
                number:0
            }
        },
        watch:{
            "$route.query.zero"(){
                this.username= sessionStorage.getItem('key');
                shopcarShowGoodsApi(sessionStorage.getItem('account')).then(req =>{
                   this.number = req.data.length;
                })
            }
        },
        methods:{
            loginIndex(){
                this.$router.push({path:'/login/'})
            },
            registered(){
                this.$router.push({path:'/registered/'})
            },
            logoIndex(){
                this.$router.push({path:'/'});
            },
            goodsBuy(){
                this.$router.push({path:'/Shopcar/'});
            },
            closeLogin(){
                let value = "";
                sessionStorage.setItem('key', value);
                sessionStorage.setItem('account', value);
                this.username = value;
                this.$router.go(0)
                // this.$bus.$on('closeZero',0)
            }
        },
        created() {
            this.username= sessionStorage.getItem('key');
            if(sessionStorage.getItem('account')){
                shopcarShowGoodsApi(sessionStorage.getItem('account')).then(req =>{
                    this.number = req.data.length;
                })
            }
        }
    }
</script>

<style lang="scss" scoped>
.zero_heard{
    .zero_top{
        width: 100%;
        background-color: #000c17;
        height: 30px;
    }
    .zero_naviga{
        height: 200px;
        .naviga_body{
           width: 70%;
            margin: 0 auto;
            .item{
                float: right;
                margin-top: 45px;
                margin-right: -250px;
            }
        }
        .zero_naviga_top{
            width: 70%;
            margin: 0 auto;
            font-size: 14px;
            opacity: 0.8;
            .login_box{
                float: right;
                cursor: pointer;
            }
            .login_box span:hover{
                    color: #3a8ee6;
                }
        }
    }
}
</style>
